<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <style>
    .accordion {
      width: 200px;
    }

    .accordion-title {
      background-color: red;
    }

    .accordion-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: 0.5s;
      outline: 0px
    }

    .accordion:hover .accordion-body {
      grid-template-rows: 1fr;
      outline: 1px solid black;

    }

    .accordion-body>div {
      overflow: hidden;
    }
  </style>
  <div class="accordion">
    <div class="accordion-title">Hover me!</div>
    <div class="accordion-body">
      <div>
        <p>Lorem ipsum ...</p>
      </div>
    </div>
  </div>


  <script>


    // el.style.height = 'auto';
    // let h = el.offsetHeight;
    // el.style.height = '0px';
    // // 浏览器重绘 el.offsetHeight
    // requestAnimationFrame(() => {
    //    el.style.height = h + 'px'
    // })
    // 1. 我们先让元素的高度变为 auto,此时虽然高度变了，但是浏览器还没有刷新页面
    // 2. 然后获取他的 offsetHeight，此时就是结束时的高度
    // 3. 然后再高度重置为 0
    // 4. 最后在浏览器 重绘之前 再把高度还给他，此时浏览器就会从 0 开始变化到 结束高度


  </script>
</body>

</html>